<template>
    <div class="list-page">
        <nav class="list-page-nav inline-block">
            <ul class="pagination">
                <li :class="['prev',{'disabled':activeNum <= 1}]">
                    <a href="javascript:void(0);" @click="prev">«</a>
                </li>
                <li v-for="page in pages" :class="['page',{'active':activeNum==page}]" >
                    <a href="javascript:void(0);" @click="togglePage(page)" v-text="page"></a>
                </li>
                <li class="next" :class="['next',{'disabled':(activeNum ==0 || activeNum == pageTotal)}]">
                    <a href="javascript:void(0);" @click="next">»</a>
                </li>
            </ul>
        </nav>
        <label class="fr">全部&nbsp;{{total}}&nbsp;条记录</label>
    </div>
</template>
<script>
    export default {
        props:{
           // 是否请求服务器端数据
           async: {
                type: Boolean,
                default: true
            },
            // 每页显示个数
            len: {
                type: Number,
                default: 10
            },
            // 表格数据（数组）
            data: {
                type: Array,
                default: function () {
                    return []
                }
            },
            // AJAX地址
            url: {
                type: String,
                default: ''
            },
            // 显示页数
            pageLen: {
                type: Number,
                default: 5
            },
            // 参数内容
            param: {
                type: Object,
                default:function(){
                    return {}
                }
            }
        },
        data(){
            return{
                activeNum:1,
                total:0,
                pages:[],
                pageTotal:0// 总页数 
            }
        },
        created(){
            if(this.async){
                this.getDatas(1);
            }
        },
        methods: {
          getDatas: function (index) {
             this.param.pageSize = this.len;
             this.param.pageNum  = index;

             global.fn.default.$get(this.url,this.param,this,"JSONP",this.setPages,10);
          },
          prev(){
            if(this.activeNum > 1){
                this.activeNum--;
            }
          },
          next(){
            if(this.activeNum < this.pageTotal){
                this.activeNum++;
            }
          },
          togglePage(index){
            this.activeNum = index;
          },
          setPages(_self,res){
            this.total = res.result.total;//总条数据
            this.pageTotal = (Math.ceil(res.result.total / this.len));
            if(this.total == 0) this.activeNum = 0;
            this.getPages(this.pageTotal,this.pageLen,this.activeNum);

            this.$emit('renderdata',res.result.datas);
          },
          getPages(total,max,current){
            this.pages = [];
            let calPage = Math.floor(max/2);
            if(total <= max){
                for(let i=1;i <= total;i++){
                    this.pages.push(i);
                }
            }else if(max - current > calPage){
                for(let i=1;i <= max;i++){
                    this.pages.push(i);
                }
            }else if((total - current > calPage && current > calPage) || (total - current >= max)){
                for(let i = (current-calPage);i < current;i++){
                    this.pages.push(i);
                }
                for(let i = current,j=0;j <= calPage;i++,j++){
                    this.pages.push(i);
                }
            }else if(total - current < max){
                for (var i = total,j=0; j < max ; i--,j++) {
                    this.pages.unshift(i);
                }
            }
          },
          refresh(){
                if(this.activeNum == 1){
                    this.getDatas(1);
                }else{
                    this.activeNum = 1;
                }
            }
        },
        watch:{
            'activeNum' (newVal,oldVal) {
                this.getDatas(this.activeNum);
            }
        }
       
    }
</script>